<script setup lang="ts">
import { onUpdated, reactive, ref } from "vue";
import { menuAllApi, menueditApi, menuAddApi, menuDelApi } from '../apis/menuApi'
import { ElMessage } from 'element-plus';
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message.css';
//接口
interface AdminInfo {
    id: number
    name: string
    perms: string
    path: string
    component: string
    parentId: number
    type: number | string
    children: any
}
//声明变量
const adminInfo = ref('')
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
let radio2 = ref(1)
let id = ref(null)
let inp1 = ref('')
let inp2 = ref(null)
let inp3 = ref('')
let inp4 = ref('')
let inp5 = ref('')
let add1 = ref('');
let add2 = ref(null);
let add3 = ref('');
let add4 = ref('');
let add5 = ref('');
let dialogTableVisible = ref(false)
let AdminData: AdminInfo[] = reactive([]);
//声明方法
const multipleSelection = ref<AdminInfo[]>([])
const handleSelectionChange = (val: AdminInfo[]) => {
    multipleSelection.value = val
    console.log(val);
    let arr = []
    val.forEach(v => {
    });
}
const handleSizeChange = (val: number) => {
    pageSize4.value = val;
    console.log(`每页${val} 条`)
}
const handleCurrentChange = (val: number) => {
    currentPage4.value = val
    console.log(`当前页: ${val}`)
}
const render = async () => {
    const { data }: { [propsName: string]: any } = await menuAllApi()
    if (data.code == 0) {
        AdminData.length = 0
        AdminData.push(...data.data)
        AdminData.forEach((v) => {
            AdminData.push(...v.children)
            //判断菜单
            switch (v.type) {
                case 0:
                    v.type = '目录';
                    break;
                case 1:
                    v.type = '菜单';
                    break;
                case 2:
                    v.type = '按钮';
                    break;
                case 3:
                    v.type = '超级管理员';
                    break;
            }
            v.children.forEach((v) => {
                switch (v.type) {
                    case 0:
                        v.type = '目录';
                        break;
                    case 1:
                        v.type = '菜单';
                        break;
                    case 2:
                        v.type = '按钮';
                        break;
                }
            })
        })
    } else if (data.msg) {
        ElMessage({
            type: 'error',
            message: data.msg
        })
    }
}
//添加菜单
const MenuAdd = async () => {
    const { data }: { [propsName: string]: any } = await menuAddApi({
        component: add4.value,
        name: add1.value,
        parentId: add2.value,
        path: add3.value,
        perms: add5.value,
        type: 0
    })
    if (data.code == 0) {
        dialogVisible2.value = false
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
        render()
    } else if (data.msg) {
        ElMessage({
            type: 'error',
            message: data.msg
        })
        add4.value = null;
        add1.value = null;
        add2.value = null;
        add3.value = null;
        add5.value = null;
    }
}
const Addquxiao = () => {
    dialogVisible2.value = false
    add4.value = null;
    add1.value = null;
    add2.value = null;
    add3.value = null;
    add5.value = null;
}
const editMenu = (val) => {
    dialogVisible.value = true
    id.value = val.id;
    inp1.value = val.name;
    inp3.value = val.perms;
    inp5.value = val.path;
    inp4.value = val.component;
    inp2.value = val.parentId;
}
//编辑确定
const editSure = async () => {
    const { data }: { [propsName: string]: any } = await menueditApi({
        id: id.value,
        name: inp1.value,
        perms: inp3.value,
        path: inp5.value,
        component: inp4.value,
        parentId: inp2.value,
        type: radio2.value
    })
    if (data.code == 0) {
        dialogVisible.value = false
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        render()
    } else if (data.msg) {
        ElMessage({
            type: 'error',
            message: data.msg
        })
    }
}
//删除获取id
const delMenu = (val) => {
    dialogTableVisible.value = true
    id.value = val.id
}
//删除确认
const delSure = async () => {
    const { data }: { [propsName: string]: any } = await menuDelApi(id.value)
    if (data.code == 0) {
        dialogTableVisible.value = false
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        render()
    } else if (data.msg) {
        ElMessage({
            type: 'error',
            message: data.msg
        })
    }
}
//渲染
render()
// onUpdated(() => {

// });
</script>
<template>
    <zlj-header msg="菜单管理"></zlj-header>
    <el-container style="background-color: #f5f7fa;padding:0 ;">
        <el-main style="margin:1rem 1rem 0 1rem;background-color: rgb(255, 255, 255);">
            <!-- 表格 -->
            <el-button style="margin: 10px;" @click="dialogVisible2 = true">添加菜单</el-button>
            <div class="zlj-table">
                <el-table ref="multipleTableRef"
                    :data="AdminData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" border stripe
                    style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column property="id" sortable label="菜单id" />
                    <el-table-column property="name" label="菜单名称">
                    </el-table-column>
                    <el-table-column property="type" label="类型" />
                    <el-table-column property="parentId" label="上级菜单id" />
                    <el-table-column property="path" label="菜单URL" />
                    <el-table-column property="component" label="菜单组件" />
                    <el-table-column property="perms" label="授权标识" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button link type="success" size="small" style="padding: 0;"
                                @click="editMenu(scope.row)">编辑</el-button>
                            <el-button @click="delMenu(scope.row)" link type="success" size="small"
                                style="padding: 0;">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="demo-pagination-block">
                <el-config-provider>
                    <el-pagination v-model:current-page="currentPage4" :page-size="pageSize4" :page-sizes="[5, 10, 15, 20]"
                        :default-page-size="5" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="AdminData.length"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </el-config-provider>
            </div>
        </el-main>
    </el-container>
    <!-- 编辑弹框 菜单-->
    <el-dialog v-model="dialogVisible" title="菜单编辑" width="30%" class="editadmin">
        <div class="zlj-edit"><span>&nbsp;&nbsp;</span><label for="">菜单类型</label>
            <el-radio-group v-model="radio2" class="ml-4">
                <el-radio :label="0">目录</el-radio>
                <el-radio :label="1">菜单</el-radio>
                <el-radio :label="2">按钮</el-radio>
            </el-radio-group>
        </div>
        <div class="zlj-edit" v-show="radio2 == 1">&nbsp;<label for=""><span>*</span>菜单名称</label>
            <el-input v-model="inp1" placeholder="菜单名称" clearable style="width: 17rem;" />
        </div>
        <div class="zlj-edit" v-show="radio2 == 0">&nbsp;<label for=""><span>*</span>目录名称</label>
            <el-input v-model="inp1" placeholder="目录名称" clearable style="width: 17rem;" />
        </div>
        <div class="zlj-edit" v-if="radio2 == 2">&nbsp;<label for=""><span>*</span>按钮名称</label>
            <el-input v-model="inp1" placeholder="按钮名称" clearable style="width: 17rem;" />
        </div>
        <div class="zlj-edit"><span>&nbsp; </span><label for="">上级菜单</label>
            <el-input v-model="inp2" placeholder="上级菜单" clearable style="width: 17rem;" />
        </div>
        <div class="zlj-edit" v-if="radio2 == 1 || radio2 == 2"><span>&nbsp;&nbsp;</span><label for="">授权标识</label>
            <el-input v-model="inp3" placeholder="授权标识" clearable style="width: 17rem;" />
        </div>
        <div class="zlj-edit" v-if="radio2 == 1"><span>&nbsp;&nbsp;</span><label for="">菜单路由</label>
            <el-input v-model="inp4" placeholder="菜单路由" clearable style="width: 17rem;" />
        </div>
        <div class="zlj-edit" v-if="radio2 == 0 || radio2 == 1"><span>&nbsp;&nbsp;</span><label for="">菜单URL</label>
            <el-input v-model="inp5" placeholder="菜单URL" clearable style="width: 17rem;" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="editSure">提交</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加弹框 -->
    <el-dialog v-model="dialogVisible2" title="菜单添加" width="30%" class="editadmin">
        <el-input v-model="add1" placeholder="请输入菜单名称" class="zlj-int"><template #prefix>
            </template></el-input>
        <el-input v-model="add2" placeholder="上级菜单id" class="zlj-int">
        </el-input>
        <el-input v-model="add3" placeholder="请输入菜单URL" class="zlj-int">
        </el-input>
        <el-input v-model="add4" placeholder="请输入菜单组件" class="zlj-int" />
        <el-input v-model="add5" placeholder="请输入授权标识" class="zlj-int">
        </el-input>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="Addquxiao">取消</el-button>
                <el-button type="primary" @click="MenuAdd">提交</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 删除弹框 -->
    <el-dialog v-model="dialogTableVisible" title="删除菜单">
        <p>确定删除吗</p>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="delSure">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style scoped lang="less">
.editadmin {
    display: flex;

    .el-input {
        margin: 5px;
    }

    .zlj-edit {
        margin-bottom: 8px;

        span {
            color: red;
        }

        label {
            margin-right: 10px;
        }
    }
}

.zlj-btn2 {
    margin: 1rem;
}

.el-main {
    padding: 0;
    position: relative;

    .state {
        width: 8rem;
    }

    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }

    .demo-date-picker .block {
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .demo-date-picker .block:last-child {
        border-right: none;
    }

    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
}

.pick {
    border: 1px solid #ccc;
    margin: 0 1rem 0 1rem;

    .el-form--inline .el-form-item {
        margin-right: 10px;
        margin-left: 10px;
    }

    .el-form-item__label {
        padding: 0;
    }

    h4 {
        padding-left: 10px;
        font-size: 18px;
        margin: 8px 0;
    }
}

.is-selected {
    color: #1989fa;
}
</style>
<style lang="less">
.el-table .cell {
    padding: 0;
}

.cell {
    text-align: center;

    .el-checkbox {
        margin-left: 1.2rem;
    }
}

.demo-pagination-block {
    //分页样式
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 1rem;

    .el-pager li:hover {
        color: rgb(26, 188, 156);
    }

    li.is-active {
        color: rgb(26, 188, 156)
    }
}

.el-date-editor .el-range-input {
    padding: 0;
}

.el-input_wrapper {
    width: 5rem;
}

.el-dialog__header {
    background-color: rgba(242, 242, 242, 1);
    margin-right: 0;
    margin: 0;
    line-height: 30px;
}
</style>